<template>
  <div class="min-h-screen bg-gray-200">
    <!-- logo -->
    <div class="flex  items-center bg-rose-500 text-white px-20 h-10 space-x-8">
      <a class="text-2xl">亿购网</a>
      <a href="/homePage" class="bg-red-800 h-10 leading-10 text-yellow-400 px-4">返回首页</a>
    </div>
    <!-- 提示信息 -->
    <div class="flex  items-center  justify-center  bg-gray-200 text-gray-500 px-8 h-10">
      <el-icon>
        <Warning />
      </el-icon>
      <span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！将更有利于保护您的个人隐私。</span>
    </div>

    <div class="login-box relative ">
      <div
        class="text-sm w-[400px] text-center h-10 leading-10 bg-[#fff8f0] text-[#999] absolute top-20 md:top-30 right-100 md:right-40 z-10 ">
        <el-icon>
          <Warning />
        </el-icon> 亿购网不会以任何理由要求您转账汇款，谨防诈骗。
      </div>
      <el-card class="login-card absolute top-20 md:top-30 right-100 md:right-40">
        <h1 class="login-title">账号登录</h1>
        <div class="login-form">
          <el-form 
             ref="ruleFormRef"
            :model="loginForm" 
            label-position="left" 
            :rules="rules"
             hide-required-asterisk>
            <el-form-item label="用户名" label-width="60px" prop="username">
              <el-input v-model="loginForm.username" autocomplete="off" prefix-icon="user" placeholder="用户名/已验证手机" />
            </el-form-item>

            <el-form-item label="密码" label-width="60px" prop="password">
              <el-input v-model="loginForm.password" type="password" autocomplete="off" prefix-icon="lock" show-password
                placeholder="密码" />
            </el-form-item>

            <el-row>
              <el-col :span="16">
                <el-form-item label="验证码" label-width="60px">
                  <el-input v-model="loginForm.captcha" autocomplete="off" prefix-icon="check" show-password />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!-- 绑定点击时间过来更新验证码图片 -->
                <img :src="captchaUrl" @click="updateCaptcha" class="captcha-image" alt="验证码">
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="danger" @click="handleLogin(ruleFormRef)" style="width: 100%;">登录</el-button>
            </el-form-item>
          </el-form>

        </div>

        <!-- 无帐号，点此注册 -->
        <el-row style="text-align: right;">
          <el-col>
            <el-text class="w-150px mb-2">
              若无帐号，点此>>
              <RouterLink to="/register/step1" style="font-size: 1.2em;">注册</RouterLink>
            </el-text>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <Footer2 />
  </div>

</template>

<script setup>
import {ref,reactive} from 'vue';
import {RouterLink} from 'vue-router'
import {useRouter} from 'vue-router'
import {useUserStore } from '@/stores/user'
import Footer2 from '@/components/Footer2.vue';
const userStore = useUserStore()

// 验证码图片URL
const captchaUrl = ref('/api/captcha');

const  ruleFormRef=ref();

// 更新验证码的函数
function updateCaptcha() {
  // 假设您的后端提供了一个接口来获取新的验证码图片
  // 这里使用一个简单的时间戳来模拟动态更新的URL
  captchaUrl.value = `/api/captcha?t=${new Date().getTime()}`;
}

// 定时更新验证码
setInterval(updateCaptcha, 300000); // 每5分钟更新一次验证码

const loginForm = reactive({
  username: '',
  password:'' ,
  captcha: ''
});


const router = useRouter()

const validatePhone = (rule, value, callback) => {
  const phoneReg = /^1[3-9]\d{9}$/;
  if (!value) {
    callback(new Error('请输入用户名'));
  } else {
    if (!phoneReg.test(value)) {
      return callback(new Error('请输入正确的手机号码'));
    }
    callback();
  }
};
const rules= reactive({
  username:[
    { validator:validatePhone, trigger: 'blur' },
  ],
  password:[
    { required: true, message: '请输入密码', trigger: 'blur' },
    {  min: 6, message: '密码长度最少为6位', trigger: 'blur' }
  ]
})
const handleLogin = async (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      console.log('登录信息:', loginForm);
      //todo 这里可以添加登录逻辑
      userStore.login(loginForm)
      //跳转到home页面
      router.push("/homePage")
    } else {
      console.log('error submit!')
    }
  })
  //  
}


</script>
<style scoped>

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background-image: url('@/assets/image/loginBg.jpg'); 假设背景图片在assets目录下 */
  background-size: cover;
  background-position: center;
}

.login-box{
  background-image: url('@/assets/image/loginBg2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
    /* 可选：背景固定 */
  height: 80vh;
}
.login-card {
  width: 400px;
  padding: 20px;
  background-color: #fafafa;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  /* color: #409eff; */
  color: red;
}

.login-form {
  width: 100%;
}

.captcha-image {
  cursor: pointer; /* 当鼠标悬停时显示为可点击状态 */
  margin-left: 10px; /* 与输入框保持一定间距 */
  height: 36px; /* 控制图片高度，根据实际情况调整 */
  vertical-align: middle; /* 垂直居中对齐 */
}
</style>